<template>
	<view style="overflow: hidden;">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">隐患治理</view>
			<view class="right"><image @click="toLog" src="../../static/fengxianxuncha/log.png"></image></view>
		</view>
		<view class="body">
			<view class="container">
				<view class="card">
					<view class="title">隐患信息</view>
					<view class="item flex-row">
						<view class="label">风险名称</view>
						<view class="value">{{ info.title || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">隐患等级</view>
						<view class="value">{{ info.danger_status_text || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">风险等级</view>
						<view class="value">{{ info.fx_status_text || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">隐患分类</view>
						<view class="value">{{ info.cart || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">发现日期</view>
						<view class="value">{{ info.addtime || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">隐患视图</view>
						<view class="value flex-row" style="justify-content: flex-start;">
							<image @click="preview(item)" v-for="(item, index) in info.pics" :key="index" :src="item"></image>
						</view>
					</view>
					<view class="item flex-row">
						<view class="label">隐患描述</view>
						<view class="value">{{ info.description || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">发现人员</view>
						<view class="value">{{ info.find_username || '' }}</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 30upx;">
					<view class="title">整改信息</view>
					<view class="item flex-row">
						<view class="label">整改期限</view>
						<view class="value">{{ info.limit_time || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">整改日期</view>
						<view class="value">{{ info.done_time || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">整改责任人</view>
						<view class="value">{{ info.done_username || '' }}</view>
					</view>
					<view class="item flex-row">
						<view class="label">整改状态</view>
						<view class="value">{{ info.done_status_text || '' }}</view>
					</view>
					<!--整改-->
					<view v-if="info.view_type == 3 || info.view_type == 4" class="item flex-row flex-start">
						<view class="label">整改措施<text class="require">*</text></view>
						<view class="value"><textarea v-model="rect.measure" placeholder="请输入整改措施" /></view>
					</view>
					<view v-if="info.view_type == 3 || info.view_type == 4" class="item flex-row">
						<view class="label">投入资金<text class="require">*</text></view>
						<view class="value"><input type="text" v-model="rect.use_money" placeholder="请输入投入资金" /></view>
					</view>
					<view v-if="info.view_type == 3 || info.view_type == 4" class="item flex-row">
						<view class="label">整改后视图<text class="require">*</text></view>
						<view class="value flex-row upload-box">
							<view v-for="(item, index) in picsarr" :key="index" class="pic">
								<image @click="preview(item)" :src="item"></image>
								<uni-icons @click="deletePic(index)" type="clear" size="20" color="red" style="line-height: 1;"></uni-icons>
							</view>
							<view v-if="picsarr.length < 3" class="upload" @click="uploadFile">+</view>
						</view>
					</view>
					
					<!--验收不通过原因-->
					<view v-if="info.view_type == 2" class="title">验收信息</view>
					<view v-if="info.view_type == 2" class="item flex-row flex-start">
						<view class="label">不通过原因<text class="require">*</text></view>
						<view class="value">
							<textarea v-model="refuseReason" placeholder="请输入不通过原因" />
						</view>
					</view>
					
					<!--误报信息-->
					<uni-popup ref="popup" type="center">
						<view class="error-box">
							<view class="title">   是否取消误报任务？</view>
							<textarea v-model="errorReason" placeholder="请输入原因" />
							<view class="opers flex-row">
								<view @click="hideError" class="cancel">取消</view>
								<view @click="confirmCancelError" class="confirm">确认</view>
							</view>
						</view>
					</uni-popup>
					
					<!--任务指派-->
					<view v-if="isDispatch" class="title">任务指派</view>
					<view v-if="isDispatch" class="item flex-row">
						<view class="label">指定整改人</view>
						<view class="value" @click="changeDispatcher">
							<input type="text" v-model="dispatchUsername" disabled placeholder="请选择整改人" />
							<uni-icons type="arrowright" size="16" style="position: absolute;top: 10upx;right: 20upx;"></uni-icons>
						</view>
					</view>
					
					<!--操作按钮-->
					<view v-if="info.view_type == 2" class="btns">
						<view @click="checkPass" class="btn success">验收通过</view>
						<view @click="checkFail" class="btn error">验收不通过</view>
					</view>
					<view v-else-if="info.view_type == 3" class="btns">
						<view @click="rectSubmit" v-if="!isDispatch" class="btn success">整改并提交验收</view>
						<view @click="toCoporator(true)" v-if="!isDispatch" class="btn normal">指定责任人</view>
						<view @click="submitDispatcher" v-if="isDispatch" class="btn success">提交指定责任人</view>
						<view @click="toCoporator(false)" v-if="isDispatch" class="btn normal">返回</view>
					</view>
					<view v-else-if="info.view_type == 4" class="btns">
						<view @click="rectSubmit" v-if="!isDispatch" class="btn success">整改并提交验收</view>
						<view @click="toCoporator(true)" v-if="!isDispatch" class="btn normal">指定责任人</view>
						<view @click="submitDispatcher" v-if="isDispatch" class="btn success">提交指定责任人</view>
						<view @click="toCoporator(false)" v-if="isDispatch" class="btn normal">返回</view>
						<view @click="cancelError" class="btn error">隐患误报/取消</view>
						<view @click="lookEdit" class="btn warning" :class="{grey : info.done_now == 1}">即查/即改</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '../../components/uni-icons/uni-icons.vue';
import uniPopup from "@/components/uni-popup/uni-popup.vue";
const DANGER_STATUS = ['', '一般隐患', '疑似重大隐患'];
const DONE_STATUS = ['', '未整改', '已整改', '未验收', '已验收'];
const RISK_STATUS = ['', '1级', '2级', '3级', '4级'];
export default{
	components: { uniIcons,uniPopup },
	data(){
		return {
			info: {
				view_type: 1,
				description: '',
				find_username: '',
				title: '',
				cart: '',
				pics: [],
				danger_status_text: '',
				limit_time: '',
				fx_status_text: '',
				done_username: '',
				addtime: '',
				done_time: '',
				done_status_text: '',
				done_now: 0
			},
			sspid: '',
			refuseReason: '',
			picsarr: [],
			pics: [],
			rect: {
				sspid: '',
				measure: '',
				pics: '',
				use_money: '',
				userid: uni.getStorageSync('userid')
			},
			isDispatch: false,
			dispatchUsername: '',
			to_user: '',
			done_userid: '',
			isError: false,
			errorReason: ''
		}
	},
	onLoad(option) {
		this.sspid = option.id;
		this.rect.sspid = this.sspid;
		this.getDetail();
	},
	onBackPress() {
		if(this.isError){
			this.isError = false;
			this.$refs.popup.close();
			return true;
		}
		return false;
	},
	onShow() {
		let to_user = uni.getStorageSync('to_user');
		if(to_user){
			this.to_user = to_user;
			this.dispatchUsername = uni.getStorageSync('to_user_name');
		}
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toLog(){
			uni.navigateTo({
				url: 'dangerHandleLog?id='+this.sspid
			})
		},
		// 预览
		preview(url){
			uni.previewImage({
				urls: [url]
			})
		},
		// 即查即改
		lookEdit(){
			let _this = this;
			uni.request({
				method: 'POST',
				url: this.$API.dangerLookEdit,
				data: {
					sspid: _this.sspid,
					userid: uni.getStorageSync('userid')
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					_this.getDetail();
				}
			})
		},
		// 关闭误报弹窗
		hideError(){
			this.$refs.popup.close();
		},
		// 确认误报
		confirmCancelError(){
			let _this = this;
			uni.request({
				method: 'POST',
				url: this.$API.dangerSubmitError,
				data: {
					sspid: _this.sspid,
					userid: uni.getStorageSync('userid'),
					detail: _this.errorReason
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.isDispatch = false;
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 0){
						setTimeout(()=>{
							uni.navigateBack();
						}, 1500);
					}
				}
			})
		},
		// 取消误报
		cancelError(){
			this.isError = true;
			this.$refs.popup.open();
		},
		// 指定责任人
		toCoporator(bool){
			this.isDispatch = bool;
		},
		// 选择指定责任人
		changeDispatcher(){
			uni.navigateTo({
				url: '/pages/organization/choiceDeptAndName'
			})
		},
		// 提交指定责任人
		submitDispatcher(){
			let _this = this;
			if(!_this.to_user){
				return uni.showToast({
					icon: 'none',
					title: '请选择指定整改人'
				})
			}
			
			uni.request({
				method: 'POST',
				url: this.$API.dangerToCoporator,
				data: {
					sspid: _this.sspid,
					userid: uni.getStorageSync('userid'),
					to_user: _this.to_user
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.isDispatch = false;
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					uni.removeStorageSync('to_user');
					uni.removeStorageSync('to_user_name');
					if(res.data.code == 0){
						setTimeout(()=>{
							uni.navigateBack();
						}, 1500);
					}
				}
			})
		},
		// 整改并提交验收
		rectSubmit(){
			if(!this.rect.measure){
				return uni.showToast({
					icon: 'none',
					title: '请输入整改措施'
				});
			}
			if(!this.rect.use_money){
				return uni.showToast({
					icon: 'none',
					title: '请输入投入资金'
				});
			}
			if(this.pics.length == 0){
				return uni.showToast({
					icon: 'none',
					title: '请上传整改后视图'
				});
			}
			
			let _this = this;
			_this.rect.pics = _this.pics.join(',');
			uni.request({
				method: 'POST',
				url: this.$API.dangerRectSubmit,
				data: _this.rect,
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 0){
						setTimeout(()=>{
							uni.navigateBack();
						}, 1500);
					}
				}
			})
		},
		// 删除图片
		deletePic(index){
			this.picsarr = this.picsarr.filter((item, idx)=>idx != index);
			this.pics = this.pics.filter((item, idx)=>idx != index);
		},
		//上传图片
		uploadFile(){
			let _this = this;
			uni.chooseImage({
				sourceType: ["camera"],
				sizeType: ["compressed"],
				success: (res) => {
					res.tempFilePaths.forEach(function(item,index){
						uni.showLoading({title: '上传中'});
						uni.uploadFile({
							url: _this.$API.upload,
							name: 'file',
							filePath: item,
							success: function(res) {
								uni.hideLoading();
								res.data = JSON.parse(res.data);
								_this.picsarr.push(item);
								_this.pics.push(res.data.fileName);
							},
							fail: function(res) {
								uni.hideLoading();
								uni.showToast({
									title:"上传失败",
									icon:'none'
								});
							}
						});
					})
					
				}
			});
		},
		// 验收不通过
		checkFail(){
			let _this = this;
			
			if(!_this.refuseReason){
				return uni.showToast({
					icon: 'none',
					title: '请填写不通过的原因'
				})
			}
			
			uni.request({
				method: 'POST',
				url: this.$API.dangerCheckFail,
				data: {
					sspid: _this.sspid,
					userid: uni.getStorageSync('userid'),
					detail: _this.refuseReason
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 0){
						setTimeout(()=>{
							uni.navigateBack();
						}, 1500);
					}
				}
			})
		},
		// 验收通过
		checkPass(){
			let _this = this;
			uni.request({
				method: 'POST',
				url: this.$API.dangerCheckPass,
				data: {
					sspid: _this.sspid,
					userid: uni.getStorageSync('userid')
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 0){
						setTimeout(()=>{
							uni.navigateBack();
						}, 1500);
					}
				}
			})
		},
		// 获取隐患详情
		getDetail(){
			let _this = this;
			uni.request({
				method: 'GET',
				url: this.$API.dangerHandleDetail,
				data: {
					id: _this.sspid,
					userid: uni.getStorageSync('userid')
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					data.danger_status_text = DANGER_STATUS[data.danger_status];
					data.fx_status_text = RISK_STATUS[data.fx_status];
					data.done_status_text = DONE_STATUS[data.done_status];
					
					let pics = data.pics.split(',');
					data.pics = pics.map(item=>this.$API.baseURL + item);
					
					// 测试用
					_this.info = data;
					_this.dispatchUsername = data.done_username;
					_this.to_user = data.done_userid;
				}
			})
		}
	}
}
</script>

<style scoped>
.flex-start{
	align-items: flex-start !important;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

>>>.uni-popup__wrapper-box{
	border-radius: 20upx;
}
>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	padding: 0;
}

.error-box{
	width: 480upx;
	background: grey;
}
.error-box .title{
	height: 80upx;
	line-height: 80upx;
	font-weight: normal !important;
	font-size: 28upx !important;
	    margin-left: 20px;
}
.error-box textarea{
	color: #999;
	height: 200upx;
	width: calc(100% - 60upx);
	font-size: 26upx;
	text-align: left;
	margin: 0 30upx;
}
.error-box .opers{
	height: 80upx;
	line-height: 80upx;
	margin-top: 20upx;
	border-top: 2upx solid #eee;
}
.error-box .opers view{
	width: 50%;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	box-sizing: border-box;
}
.error-box .opers view.cancel{
	color: #999;
	border-right: 2upx solid #eee;
}
.error-box .opers view.confirm{
	color: #1890DE;
}

.upload-box{
	justify-content: flex-start !important;
}
.upload-box .pic,
.upload-box .upload{
	width: 100upx;
	height: 100upx;
	border-radius: 16upx;
	position: relative;
}
.upload-box .pic{
	margin-right: 20upx;
}
.upload-box .pic image{
	width: 100%;
	height: 100%;
}
.upload-box .pic uni-icons,
.upload-box .pic .uni-icons{
	position: absolute;
	top: -18upx;
	right: -14upx;
	z-index: 9999;
}
.upload-box .upload{
	line-height: 100upx;
	text-align: center;
	font-size: 64upx;
	color: #fff;
	background: #eee;
}

.require{
	color: red;
	font-weight: bold;
}
input,textarea{
	width: 100%;
	background: #eee;
	border-radius: 10upx;
	box-sizing: border-box;
}
input{
	height: 70upx;
	padding: 0 16upx;
	line-height: 70upx;
}
textarea{
	height: 120upx;
	padding: 16upx;
}

.btns{
	overflow: hidden;
}
.btns .btn{
	width: 46%;
	padding: 16upx 0;
	text-align: center;
	font-size: 26upx;
	color: #fff;
	border-radius: 10upx;
	margin-top: 30upx;
	float: left;
}
.btns .btn.success{
	background: #29A641;
}
.btns .btn.error{
	background: red;
}
.btns .btn.normal{
	background: #1890DE;
}
.btns .btn.warning{
	background: orange;
}
.btns .btn.grey{
	background: #dedede;
}
.btns .btn:nth-child(1),
.btns .btn:nth-child(3){
	margin-right: 8%;
}
	
.body{
	padding: 20upx;
	overflow-y: auto;
	box-sizing: border-box;
	height: calc(100vh - 96upx - var(--status-bar-height));
}
.body .container{
	background: #fff;
	border-radius: 12upx;
	padding: 20upx 20upx 0;
	box-sizing: border-box;
}
.body .card{
	margin-bottom: 40upx;
}
.body .card .title{
	font-size: 36upx;
	font-weight: bold;
}
.body .card .item{
	margin-top: 20upx;
}
.body .card .item .label{
	width: 200upx;
}
.body .card .item .value{
	width: calc(100% - 200upx);
	position: relative;
}
.body .card .item .value image{
	width: 100upx;
	height: 100upx;
	margin-right: 20upx;
	border-radius: 10upx;
}
.body .card .item .value uni-icons{
	position: absolute;
	z-index: 9999;
}

	

</style>
